<!-- LayoutAside -->
<template>
  <el-menu
    :default-active="CurrentPage.path"
    :background-color="variables.ThemeBg"
    :text-color="variables.ThemeText"
    :active-text-color="variables.ThemeActiveText"
    :collapse="isCollapse"
    router
    onselectstart="return false;"
    style="-moz-user-select:none;"
  >
    <div class="logo" v-show="!isCollapse">Example</div>
    <div class="logo" v-show="isCollapse">Ep</div>
    <div class="menuList">
      <el-scrollbar style="height:100%;">
        <template v-for="routeItem in routes">
          <!-- 无子菜单 -->
          <menuItem
            v-if="!routeItem.hidden && routeItem.children.length === 1"
            :baseUrl="routeItem.path"
            :routes="routeItem.children[0]"
            :key="routeItem.path"
          />

          <!-- 有子菜单 -->
          <subMenu
            v-if="!routeItem.hidden && routeItem.children.length > 1"
            :baseUrl="routeItem.path"
            :routes="routeItem"
            :key="routeItem.path"
          />
        </template>
      </el-scrollbar>
    </div>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
import variables from "@/assets/css/variables.scss";
import menuItem from "./menuItem";
import subMenu from "./subMenu";
export default {
  name: "LayoutAside",
  components: {
    menuItem,
    subMenu
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("Layout", ["isCollapse", "CurrentPage"]),
    ...mapState("permission", ["routes"]),
    variables() {
      return variables;
    }
  },
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.el-menu {
  height: 100vh;
  overflow: hidden;
  border: none;

  .logo {
    font-size: 26px;
    font-weight: bolder;
    color: #fff;
    text-align: center;
    line-height: 85px;
    height: 85px;
    text-shadow: 6px 6px 3px #cccccc61;
  }
  .menuList {
    height: calc(100vh - 85px);
  }
}

.el-menu:not(.el-menu--collapse) {
  width: $AsideWidth;
}

.el-menu--collapse {
  /deep/ .el-submenu {
    .el-submenu__title {
      span {
        display: none;
      }

      .el-icon-arrow-right {
        display: none;
      }
    }
  }
}
</style>
